<template>
  <div id="user-profile">
 
    <van-form @submit="onSubmit">
      <van-field label="用户" v-model="userForm.id" type="text" readonly />
      <van-field label="用户" v-model="userForm.name" type="text" placeholder="请输入用户"
        :rules="[{ pattern:regNamePwd,required: true, message: '无效用户名' }]" />
      <van-field label="邮箱" v-model="userForm.email" type="email" placeholder="请输入邮箱"
        :rules="[{ pattern:regEmail, message: '无效邮箱' }]" />
      <van-field label="电话" v-model="userForm.phone" type="tel" placeholder="请输入电话"
        :rules="[{ pattern:regPhone, message: '无效手机号码' }]" />
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="userForm.gender" direction="horizontal">
            <van-radio :name="1">男</van-radio>
            <van-radio :name="0">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field label="昵称" v-model="userForm.nick_name" type="text" placeholder="请输入昵称"></van-field>
       <van-field name="uploader" label="头像">
        <template #input>
          <van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
 
<script>
  import { showToast } from 'vant';
  import {    getDetailByIdAPI,    updateAPI,    uploadAvatarAPI  } from "@/api/user.js";
  import {getUserLocal} from "@/utils/auth.js";
  export default {
    data() {
      return {
        userForm: { //表单中的字段名与数据库中用户表的字段名要求一致
          id: null,
          name: "",
          email: "",
          phone: "",
          gender: 1,
          avatar: "",
          nick_name:"",
        },
        avatarList: [],
        //规则:字母数字‘6~12        
        regNamePwd: /^[a-z0-9]{3,12}$/i,
        regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
        regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      };
    },
   
    created() {
      let id = getUserLocal().id;
      getDetailByIdAPI(id).then(result => {
        this.userForm = result.data;
        this.avatarList = [];
        this.avatarList.push({
          url: this.APIDomainName + this.userForm.avatar
        });
      });
    },
    methods: {
      //手动处理文件上传
      afterRead(file) {
        file.status = 'uploading';
        file.message = '上传中...';
        uploadAvatarAPI(file.file).then(result => {
          file.status = '';
          file.message = '';
          //重新生成显示的图片url
          this.avatarList = [];
          this.avatarList.push({
            url: this.APIDomainName + result.url
          })
          //设置用户表中的字段值
          this.userForm.avatar = result.url;
        });
      },
      //处理提交保存
      onSubmit() {      
        //注意传递过去的参数user的属性名
        let user = this.userForm;
        updateAPI(user).then(() => {
          showToast("更新成功！");
          this.$router.push({
            name: "user"
          });
        });
      },
    },
  };
</script>
 
<style  lang="less" scoped>
</style>
